import React from 'react';
import { Modal, message, Form, Input, Button } from 'antd';
import { addAttrValRule } from '../service';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';

interface Props {
  /**
   * 属性 ID
   */
  attrId: number;
  detail: any;
  /**
   * 是否显示
   */
  visible: boolean;
  onCancel: () => void;
  onOk: () => void;
}

export default function MemberModal(props: Props) {
  const { attrId, visible, onOk, detail } = props;
  const [form] = Form.useForm();

  const cancel = () => {
    if (typeof props.onCancel === 'function') {
      props.onCancel();
    }
  };

  const onUpdateMember = () => {
    form.submit();
  };

  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 4 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 20 },
    },
  };
  const formItemLayoutWithOutLabel = {
    wrapperCol: {
      xs: { span: 24, offset: 0 },
      sm: { span: 20, offset: 4 },
    },
  };

  const DynamicFieldSet = () => {
    const onFinish = async (values: any) => {
      const { code } = await addAttrValRule(attrId, values);
      if (code === 0) {
        message.success('操作成功');
        onOk();
      }
    };

    return (
      <Form
        form={form}
        name="dynamic_form_item"
        {...formItemLayoutWithOutLabel}
        initialValues={{ valList: detail.attr_vals.map((it: any) => it.name) }}
        onFinish={onFinish}
      >
        <Form.List name="valList">
          {(fields, { add, remove }) => {
            return (
              <div>
                {fields.map((field, index) => (
                  <Form.Item
                    {...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
                    label={index === 0 ? '属性值' : ''}
                    required={false}
                    key={field.key}
                  >
                    <Form.Item
                      {...field}
                      validateTrigger={['onChange', 'onBlur']}
                      rules={[
                        {
                          required: true,
                          whitespace: true,
                          message: '商品属性不能为空',
                        },
                      ]}
                      noStyle
                    >
                      <Input placeholder="请输入商品属性" style={{ width: '60%' }} />
                    </Form.Item>
                    {fields.length > 1 ? (
                      <MinusCircleOutlined
                        className="dynamic-delete-button"
                        style={{ margin: '0 8px' }}
                        onClick={() => {
                          remove(field.name);
                        }}
                      />
                    ) : null}
                  </Form.Item>
                ))}
                <Form.Item>
                  <Button
                    type="dashed"
                    onClick={() => {
                      add();
                    }}
                    style={{ width: '60%' }}
                  >
                    <PlusOutlined />
                    新增
                  </Button>
                </Form.Item>
              </div>
            );
          }}
        </Form.List>
      </Form>
    );
  };

  return (
    <Modal
      title="管理属性值"
      visible={visible}
      onOk={() => onUpdateMember()}
      onCancel={() => cancel()}
      okButtonProps={{}}
      okText="确定"
    >
      {DynamicFieldSet()}
    </Modal>
  );
}
